<script>
import dayjs from "dayjs";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  name: "index",
  components: { vueSeamlessScroll },
  data() {
    return {
      searchProject: null, // 当前筛选项目
      projectList: [], // 筛选项目列表
      meetingData: [
        { name: "会议室", state: "空闲中" },
        { name: "会议室", state: "空闲中" },
        { name: "会议室", state: "空闲中" },
        { name: "会议室", state: "空闲中" },
        { name: "会议室", state: "空闲中" },
        { name: "会议室", state: "空闲中" },
        { name: "会议室", state: "空闲中" },
        { name: "会议室", state: "空闲中" },
        { name: "会议室", state: "空闲中" },
        { name: "会议室", state: "空闲中" },
        { name: "会议室", state: "空闲中" },
        { name: "会议室", state: "空闲中" },
      ], // 会议室数据
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      dateData: {
        dateDay: "",
        dateYear: "",
        dateWeek: "",
      },
      classOption: { step: 0.2, limitMoveNum: 7, hoverStop: true },
    };
  },
  methods: {
    // 当前时间
    timeFn() {
      this.dateData.timing = setInterval(() => {
        this.dateData.dateDay = dayjs().format("YYYY-MM-DD hh : mm : ss");
        this.dateData.dateWeek = this.weekday[dayjs().day()];
      }, 1000);
    },
  },
  mounted() {
    this.searchProject = this.projectList[0];
    this.timeFn();
  },
};
</script>

<template>
  <div class="app-container">
    <div class="container">
      <div class="header">
        <div class="search">
          <el-select v-model="searchProject" :popper-append-to-body="false">
            <el-option
              v-for="item in projectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="title">
          <span class="title-text">楼宇经济云平台数据大屏</span>
        </div>
        <div class="time">
          <div class="time-content">
            <div class="fullBtn">
              <svg-icon icon-class="fullscreen"></svg-icon>
            </div>
            <div class="now-time">
              <span>
                {{ dateData.dateYear }} {{ dateData.dateWeek }}
                {{ dateData.dateDay }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="left">
          <div class="left-title">
            <h3>会议室状态</h3>
          </div>
          <vue-seamless-scroll
            :data="meetingData"
            class="warp"
            :class-option="classOption"
          >
            <ul class="item">
              <li v-for="(item, index) in meetingData" :key="index">
                <span class="title" v-text="item.name"></span>
                <span class="date" v-text="item.state"></span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
        <div class="center">
          <div class="top-list">
            <div class="top-item">
              <div class="top-item-content">
                <div class="number">10</div>
                <div class="name">入驻公司</div>
              </div>
            </div>
            <div class="top-item">
              <div class="top-item-content">
                <div class="number">10</div>
                <div class="name">入驻人数</div>
              </div>
            </div>
            <div class="top-item">
              <div class="top-item-content">
                <div class="number">10</div>
                <div class="name">进行中活动</div>
              </div>
            </div>
            <div class="top-item">
              <div class="top-item-content">
                <div class="number">10</div>
                <div class="name">已承办活动</div>
              </div>
            </div>
            <div class="top-item">
              <div class="top-item-content">
                <div class="number">10</div>
                <div class="name">登记车辆</div>
              </div>
            </div>
          </div>
          <div class="map"></div>
        </div>
        <div class="right"></div>
      </div>
      <div class="footer">
        <span>楼宇经济平台管理系统</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.app-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 250px !important;
  color: #fff !important;
  position: relative !important;
  padding: 10px;

  .container {
    width: 100%;
    height: 100%;
    background: #0c1424;
    min-height: 250px !important;

    .header {
      width: 100%;
      height: 60px;
      background: url("../../assets/images/bigScreenTop.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      padding: 0 20px;
      .search {
        flex: 1;
        position: relative;

        ::v-deep .el-select {
          position: absolute;
          left: 0;
          bottom: 0;
        }
        ::v-deep .el-input__inner {
          background: #0c1424 !important;
          //border: 0;
          border: 1px solid #142f78 !important;
        }
        ::v-deep .el-select-dropdown__item {
          color: #142f78;
          border: 0;
        }
        ::v-deep .el-select-dropdown {
          background: #061f60;
          border: 0;
        }
      }

      .title {
        flex: 1;
        text-align: center;

        .title-text {
          font-size: 38px;
          font-weight: 900;
          letter-spacing: 6px;
          white-space: nowrap;
          width: 100%;
          background: linear-gradient(
            92deg,
            #0072ff 0%,
            #00eaff 48.8525390625%,
            #01aaff 100%
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .time {
        flex: 1;
        position: relative;

        .time-content {
          width: 100%;
          position: absolute;
          bottom: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-end;

          .fullBtn {
            .fullscreen {
              color: white;
            }
            margin-bottom: 10px;
          }
          .now-time {
            span {
              position: absolute;
              right: 0;
            }
          }
        }
      }
    }

    .content {
      width: 100%;
      padding: 20px 20px 0;
      box-sizing: border-box;
      margin: 0 auto;
      display: flex;

      .left {
        flex: 2;
        display: flex;
        flex-direction: column;
        height: 650px;

        .left-title {
          background: linear-gradient(to right, #0a1e6f, #066391);
          height: 50px;
          justify-content: center;
          //text-align: center;
          align-items: center;

          h3 {
            display: block;
            justify-content: center;
            margin-left: 20px;
          }
        }

        .warp {
          width: 100%;
          height: 100%;
          margin: 0 auto;
          padding: 10px;
          overflow: hidden;
          ul {
            list-style: none;
            padding: 0;
            margin: 0 auto;
            width: 100%;
            li:nth-of-type(2n) {
              background-color: #0f2b47;
            }
            li {
              width: 100%;
              height: 85px;
              line-height: 85px;
              display: flex;
              font-size: 15px;
              padding: 0 20px;
              position: relative;
              span:nth-of-type(1) {
                position: absolute;
                left: 20px;
              }
              span:nth-of-type(2) {
                position: absolute;
                right: 20px;
              }
            }
          }
        }
      }
      .center {
        flex: 4;
        .top-list {
          width: 100%;
          display: flex;
          padding: 0 20px;
          justify-content: center;

          .top-item {
            width: 150px;
            height: 150px;
            display: inline-flex;
            border: 2px solid #19285b;
            margin: 0 20px 0 0;
            .top-item-content {
              margin: auto;
            }
            .number,
            .name {
              text-align: center;
              font-size: 20px;
              margin: auto;
            }
            .number {
              font-weight: 900;
              font-size: 25px;
            }
          }
          .top-item:nth-of-type(1) {
            color: #08c7f1;
          }
          .top-item:nth-of-type(2) {
            color: #ff9f25;
          }
          .top-item:nth-of-type(3) {
            color: #0dde60;
          }
          .top-item:nth-of-type(4) {
            color: #5581fd;
          }
          .top-item:nth-of-type(5) {
            color: #0dde6e;
          }
        }
      }
      .right {
        flex: 3;
      }
    }

    .footer {
      line-height: 44px;
      padding: 0 10px;
      color: #989eb0;
      box-sizing: border-box;
      text-align: center;
      position: fixed;
      bottom: 0;
      left: 210px;
      right: 0;
      background-color: #f5f5f5;
      z-index: 9999;

      span {
        color: #7f7f7f;
      }
    }
  }
}
</style>
